<template>
  <div class="login">
    <div class="logo">
      <img src="../assets/logo.jpg" alt="登录logo" />
    </div>

    <div class="input">
      <!-- 手机号 -->
      <InputGroup :placeholder="placeholder" v-model="phone" @input="phoneval" :btnTitle="btnTitle" @btnClick="vericition()" :disabled="disabled" :error="errors.phone" />
      <!-- 验证码 -->
      <InputGroup placeholder="验证码" @input="verifictionInput" v-model="verifictionCode" :error="errors.code" />
    </div>

    <div class="agreement">
      新用户登录即自动注册,表示已同意<span>《用户服务协议》</span>
    </div>

    <div class="login-btn">
      <button @click="loginButton()" :disabled="isClick">登录</button>
    </div>
  </div>
</template>
<script>
import InputGroup from '../components/inputGroup.vue'
export default {
  name: 'login',
  data () {
    return {
      placeholder: '手机号',
      phone: '15952090055',
      verifictionCode: '892167', //输入的验证码
      btnTitle: '获取验证码',
      disabled: false,
      errors: {},
      resCode: '1234', //后台获取的验证码
      loginDistabled: false,
    }
  },
  created () {

  },
  computed: {
    isClick () {
      if (!this.phone) {
        return true
      } else {
        return false
      }
    },
  },
  methods: {
    /* 拿到手机号 */
    // enter (e) {
    //   this.phone = e
    // },
    verifictionInput (e) {
      console.log(e)
      this.verifictionCode = e
    },
    phoneval (e) {
      this.phone = e
    },

    /* 点击获取验证码 */
    vericition () {
      console.log(111);
      if (this.validataPhone()) {

        // 发送网络请求
        this.$axios.post("/api/posts/sms_send", { phone: this.phone }).then((res) => {
          alert(res.data.msg);
        });
      }
    },

    /* 点击登录 */
    loginButton () {

      this.validataPhone()
      if (this.verifictionCode == '') {
        return this.errors.code = '请输入验证码'
      }

      // localStorage.setItem('ele_login', true)
      // localStorage.setItem('userId', '5od437fef7a6970017o415fe')
      // this.$router.push('/')

      // 取消错误提醒
      this.errors = {}
      // 发送请求
      this.$axios.post('/api/posts/sms_back', {
        phone: this.phone,
        code: this.verifictionCode,
      })
        .then((res) => {
          console.log(res);
          // 检验成功 设置登录状态并且跳转到/
          localStorage.setItem('ele_login', true)
          localStorage.setItem('userId', res.data.user._id)
          const path = this.$route.query.oldPath
          if (path == 'Settlement') {
            this.$router.push({ path: 'myAddress', query: { oldPath: 'Settlement' } })
          } else {
            this.$router.push('/')
          }

        })
        .catch((err) => {
          // 返回错误信息
          this.errors = {
            code: err.response.data.msg,
          }
        })

    },

    /* 验证手机号码 */
    validataPhone () {
      if (!this.phone) {
        this.errors = {
          phone: '手机号码不能为空',
        }
        return false
      } else if (!/^1[345678]\d{9}$/.test(this.phone)) {
        this.errors = {
          phone: '手机号码格式错误',
        }
        return false
      } else {
        this.errors = {}
        return true
      }
    },

    /* 读秒 */
    seconds () {
      let times = 30
      let timer = setInterval(() => {
        times--
        this.disabled = true
        this.btnTitle = times + 'S后重试'
        if (times === 0) {
          this.btnTitle = '获取验证码'
          clearInterval(timer)
          timer = null
          this.disabled = false
        }
      }, 1000)
    },
  },
  components: {
    InputGroup,
  },
}
</script>
<style scoped>
.login {
  width: 100%;
  height: 100vh;
  box-sizing: border-box;
  background-color: #fff;
  text-align: center;
  padding-top: 1.25rem;
}
.logo {
  text-align: center;
}
.login img {
  width: 3.525rem;
}
.agreement {
  margin-top: 0.7rem;
  width: 80%;
  margin-left: 50%;
  transform: translateX(-50%);
  font-size: 0.36rem;
  text-align: left;
  letter-spacing: 0.13em;
}
.agreement span {
  color: #1c9bfa;
  line-height: 1.8em;
}
.login-btn button {
  margin-top: 1rem;
  width: 8rem;
  height: 1.1rem;
  color: #fff;
  background-color: #81d275;
  border-radius: 0.3125rem;
  box-shadow: 0.1rem 0.1rem 0.1rem rgba(0, 0, 0, 0.171);
}
.login-btn button[disabled] {
  background-color: #8bda81;
}
</style>
